<template>
  <div class="zz-table">
    <slot name="zz-header">
      <div class="zz-header">
        <div class="zz-title">{{ tableJson.title || "" }}</div>
        <div class="zz-tophandler">
          <slot name="zz-tophandler"> </slot>
        </div>
      </div>
    </slot>
    <el-table
      style="width: 100%"
      ref="eltable"
      :data="tableData"
      v-on="$listeners"
      v-bind="tableJson.tableAttributes || {}"
      v-loading="loading"
    >
      <el-table-column-tree
        :columnNode="item"
        v-for="(item, index) in tableJson.columns"
        :key="index"
      >
    <!-- 在tablejson里面要自定义表头的columnNode加上一个属性'tableHeader:true' -->
    <template
    v-if="item.tableHeader"
    slot-scope="scope"
    >
    <slot name="header" v-bind="scope" />
    </template>
        <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
          <slot :name="slot" v-bind="scope" />
        </template>
      </el-table-column-tree>
    </el-table>
    <div class="zz-footer">
      <slot name="zz-footer"> </slot>
    </div>
  </div>
</template>

<script>
import ElTableColumnTree from "./ElTableColumnTree.vue";
export default {
  name: "BaseTable",
  props: {
    tableJson: {
      type: Object,
      required: true,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    ElTableColumnTree,
  },
  data() {
    return {
      elTable: null,
    };
  },
  mounted() {
    this.elTable = this.$refs.eltable;
  },
};
</script>
<style scoped>
.zz-table .el-table {
  font-size: 12px;
}
.zz-table .zz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zz-table .zz-header .zz-title {
  font-size: 18px;
  color: #333333;
  font-weight: 700;
}
.zz-table .zz-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
<style >
.zz-table .el-table__header th{
  color: #344064;
  font-weight: 500;
  background-color: #f5f7fa;
}
.zz-table .el-table td{
  padding: 10px 0;
}
</style>